<template>
	<view class="content">
		<view class="content_con padding-lr">
			<xw-empty :isShow="emptyShow" text="暂无相关数据" textColor="#777777"></xw-empty>

			<block v-if="!emptyShow">
				<view class="content_list" v-for="(item, index) in list" :key="index">
					<!-- <image :src="item.src" mode=""></image> -->
					<view class="content_listbox">
						<view class="content_list_t">
							<text class="">
								流水 :
								<text class="text-price">{{ item.change_allvalue }}</text>
							</text>
							<text class="">
								余额 :
								<text class="text-price" style="color: #e94c11;">{{ item.balance }}</text>
							</text>
						</view>
						<view class="content_list_b">
							<text>{{ item.type == 1 ? '直推返利' : item.type == 2 ? '间推返利' : '后台操作' }}</text>
							<text>{{ item.createtime }}</text>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import xwEmpty from '@/components/xw-empty/xw-empty';
export default {
	components: {
		xwEmpty,
	},
	data() {
		return {
			emptyShow: false,
			page: 1,
			pagesize: 10,
			list: [],
		};
	},
	onShow() {
		this.name();
	},
	onReachBottom() {
		this.name()
	},
	methods: {
		async name() {
			const res = await this.$request.post('api/Commission/flow_record', {
				data: {
					page: this.page,
					pagesize: this.pagesize,
				},
			});
			
			if (res.data.code) {
				this.list = [...this.list, ...res.data.data];
				this.page ++
			}
			if (res.data.code == 0  &&  this.page ==1) {
				this.emptyShow = true
			}
			
			console.log('this.emptyShow :>> ', this.emptyShow);
			console.log('res.data.data :>> ', res);
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	overflow-x: hidden;
	.content_con {
		width: 100%;
		height: 100%;

		// background: pink;
		.content_list {
			display: flex;
			align-items: center;
			width: 100%;
			height: 145rpx;
			border-bottom: 1rpx solid #ccc;
			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}
			.content_listbox {
				display: flex;
				flex-direction: column;
				// width: calc("~100% - 90rpx");
				flex: 1;
				margin-left: 16rpx;

				.content_list_t {
					display: flex;
					justify-content: space-between;
					text {
						line-height: 33px;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						&:nth-child(1) {
							color: #333;
						}
						&:nth-child(2) {
							color: #e94c11;
						}
					}
				}
				.content_list_b {
					display: flex;
					// width: 255rpx;
					justify-content: space-between;
					line-height: 33rpx;
					color: #666;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
				}
			}
		}
	}
}
</style>
